<template>
    <div>
        <div class="page">
            <el-row class="part1_box">
                <el-row style="margin-bottom:20px;">
                    <el-col :span='4' :offset="1">
                        <div class="part1_list">
                            <p>开卡</p>
                            <p>0</p>
                        </div>
                    </el-col>
                    <el-col :span='4' :offset="1">
                        <div class="part1_list">
                            <p>缴费</p>
                            <p>0</p>
                        </div>
                    </el-col>
                    <el-col :span='4' :offset="1">
                        <div class="part1_list">
                            <p>欠费</p>
                            <p>0</p>
                        </div>
                    </el-col>
                </el-row>
            </el-row>
            <el-row class="part1_box">
                <el-row style="margin:20px;">
                    <el-col :span="24" :xs="24">
                        <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="68px">
                            <my-form :form='queryParams' style="float:left;" :options="queryParamsForm"></my-form>
                        </el-form>
                    </el-col>
                </el-row>
            </el-row>
            <el-row class="part1_box">
                <el-row style="margin:20px;">
                    <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>
                    <pagination  v-show="total>0" :total="total"  :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"  @pagination="getList" />
                </el-row>
            </el-row>
        </div>
    </div>
</template>
<script>
import Table from '@/views/components/myTable'
import myForm from '@/views/components/myForm'
export default {
    components:{
        Table,
        myForm
    },
    data() {
        return {
            loading:true,
            queryParamsForm:[
                {title:'手机号',key:'id',type:'text',styleWidth:'240px'},
                {title:'开卡卡号',key:'s',type:'text',styleWidth:'240px'},
            ],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'UID',param:'uid'},
                {label:'手机号',param:'b'},
                {label:'等级',param:'a'},
                {label:'真实姓名',param:'a'},
                {label:'开卡卡号',param:'a'},
                {label:'上月缴费',param:'a'},
                {label:'开卡状态',param:'a'},
                {label:'开卡时间',param:'a'},
                {label:'操作',param:'a'},
            ],
            list:[
                {uid:'10001'}
            ],
            total:0,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
        }
    },
    created(){
        this.getList()
    },
    methods:{
        //列表
        getList(){
            this.loading = false;
        }
    }
}
</script>
<style scoped>
.page {width:100%; height:auto; min-height:90vh; background: #eee; padding:20px;}
.part1_box {background:#fff; width:100%; margin-bottom:20px; border-radius: 20px;}
.part_title {font-size:30px; font-weight: bold; margin-top:20px; margin-left:20px; display: block; float:left;}
.part_dateDay { margin-top:30px; margin-left:20px;  display: block; float:left;}
.part1_list {height:146px; width:80%; 
background: linear-gradient(30deg, #2285FF 0%, #3BAEFF 100%); border-radius: 20px; margin-top:40px; color:#fff;}
.part1_list p {margin:0; padding:0; padding-top:20px; padding-left:40px;}
.part1_list p:nth-child(1) { font-size:24px;}
.part1_list p:nth-child(2) {font-size:50px;}
</style>
